<template>
<!-- <ChildComponent :message="parentMessage" :count="parentCount" @fu-shijian="handlesj" ></ChildComponent> -->
<!-- <ChildComponent ref="childRef"></ChildComponent> -->
<ChildComponent ref="childRef">
    <template v-slot:default="slotProps">
        <p>父组件数据：{{slotProps.parentData }}</p>
        <p>父组件按钮控件：<button @click="slotProps.parentMethod">Click</button></p>

    </template>
</ChildComponent>
</template>
<script>
import { onMounted, provide } from 'vue';
import ChildComponent from './ChildComponent.vue';
import { ref } from 'vue';

export default{
    components: {
        ChildComponent
    },
    data() {
        return {
            parentMessage : 'parent',
            parentCount : 10,
            parentData: '父亲来的数据'
        };
    },
    methods:{
        handlesj(data){
            alert('输出数据:'+data);
        },
        parentMethod(){
            console.log('父亲的方法被调用');
        }
    },
    setup() {
        const sharedData = '给儿子留的';
        provide('sharedData',sharedData);
        const childRef = ref(null);
        onMounted(()=>{
            childRef.value.someMethod();
        }) 
        return {
            childRef
        }
    }
}

</script>
